<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>添加账户</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
    color: #fff;
    padding: 20px 16px;
  }
  .top {
    padding: 20px;
    text-align: center;
  }
  .title {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
  }
  .tips {
    font-size: 14px;
    color: #a2a8b7;
    margin-top: 10px;
  }
  .add-form {
    margin-top: 10px;
  }
  .van-cell-group {
    background: #0D0E24;
    border-radius: 10px;
  }
  .van-cell {
    background: none;
    padding: 20px 16px;
    align-items: center;
  }
  .van-field__label,
  .van-field__control {
    color: #fff;
  }
  .van-cell::after {
    border-bottom-color: #10122A;
  }
  .add-account {
    width: calc(100% - 40px);
    position: fixed;
    bottom: 34px;
    left: 20px;
    font-size: 16px;
  }

  </style>
</head>

<body>
  <div id="app">
    <div class="top">
      <div class="title">添加{{text[type]}}</div>
      <div class="tips">请绑定与实名认证一致的{{text[type]}}</div>
    </div>
    <van-cell-group class="add-form" :border="false">
      <van-field v-model.trim="name" placeholder="请输入">
        <template #label>
          <span class="custom-title">{{type === 1 ? '姓名' : '持卡人'}}</span>
        </template>
      </van-field>
      <van-field v-if="type === 3" v-model.trim="accountBank" label="银行名称" placeholder="请输入"></van-field>
      <van-field v-model.trim="account" placeholder="请输入">
        <template #label>
          <span class="custom-title">{{type === 1 ? '支付宝账号' : '银行卡号'}}</span>
        </template>
      </van-field>
    </van-cell-group>
    <van-button class="add-account" :disabled="!name || !account" color="linear-gradient(270deg, #9358F4 0%, #6E53F3 100%)" round :loading="addLoading" @click="addAccount">立即绑定</van-button>
    <!-- <van-form @submit="addAccount" label-width="60px" :show-error-message="false">
      <van-field name="type" label="账户类型" input-align="right" :rules="[{ required: true, message: '请选择账户类型' }]">
        <template #input>
          <van-radio-group v-model="type" direction="horizontal">
            <van-radio :name="1">支付宝</van-radio>
            <van-radio :name="3">银行卡</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-model="name" name="name" label="姓名" input-align="right" placeholder="请输入提现账户姓名" :rules="[{ required: true, message: '请输入提现账户姓名' }]"></van-field>
      <van-field v-model="account" name="account" label="提现账号" input-align="right" placeholder="请输入提现账号" :rules="[{ required: true, message: '请输入提现账号' }]"></van-field>
      <van-button class="add-account" color="linear-gradient(270deg, #9358F4 0%, #6E53F3 100%)" round :loading="addLoading" native-type="submit">添 加</van-button>
    </van-form> -->
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      loading: false,
      addLoading: false,
      token: '',
      type: 1,
      account: '',
      name: '',
      accountBank: '',
      text: {
        1: '支付宝账户',
        3: '银行卡'
      },
      form: {

      }
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      
      var data = parse(location.search)
      console.log(data)
      if (data.type && data.token) {
        this.type = Number(data.type)
        this.token = data.token
      }
    },
    methods: {
      addAccount() {
        if (!this.name) {
          return
        }
        if (!this.account) {
          return
        }
        var data = {
          type: this.type,
          name: this.name.replace(/\s*/g, ''),
          account: this.account.replace(/\s*/g, ''),
          accountBank: this.accountBank.replace(/\s*/g, ''),
        }
        console.log(data)
        this.addLoading = true
        request.post('/api/pay/finance/userCashAccount/add', data).then(res => {
          console.log(res)
          this.$toast.loading({
            forbidClick: true,
            message: '添加成功',
            duration: 500,
            onClose: () => {
              this.showDialog = false
              history.back()
            }
          })
        }).finally(() => {
          this.addLoading = false
        })
      },
    },
  })
  </script>
</body>

</html>